<template>
  <div>
    <!-- 头 -->
    <el-card>
      <el-row type="flex" justify="space-between" class="top-box">
        <el-col>
          <el-button type="primary" @click="addAgents">添加经纪</el-button>
        </el-col>
        <el-row type="flex" justify="start" class="top-right">
          <el-input v-model="paging.name" placeholder="请输入需要搜索的经纪人" />
          <el-button icon="el-icon-search" @click="getAgentsList" />
        </el-row>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column
          label="图片"
        >
          <template v-slot="{row}">
            <img :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="200px"
        >
          <template v-slot="{row}">
            <el-button type="primary" @click="uploadAgent(row.id)">编辑</el-button>
            <el-button type="danger" @click="delAgent(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="paging.limit"
          @current-change="uploadPage"
        />
      </el-row>
    </el-card>

    <!-- 新增编辑通用弹框 -->
    <addAgents ref="addAgents" :dialog-visible.sync="dialogVisible" @uploadWeb="getAgentsList" />
  </div>
</template>

<script>
import { getAgentsList, getAgentsPage, delAgent, getAgentById } from '@/api/agents'
import addAgents from './components/add-agents.vue'
export default {
  components: {
    addAgents

  },
  data() {
    return {
      // 控制弹框显示变量
      dialogVisible: false,
      //  控制分页变量
      paging: {
        // 获取条目数
        limit: 3,
        // 获取索引位置
        start: 0,
        page: 1,
        name: ''
      },
      //   分页总数
      total: 0,
      //   表格数据源
      tableData: []
    }
  },
  created() {
    this.getAgentsList()
  },
  methods: {
    // 获取数据列表
    async getAgentsList() {
      // 获取所以符合条件的经纪列表，默认拿全部，后续按搜索关键字获取
      const page = await getAgentsList(this.paging)
      //   获取每页显示的条目
      const res = await getAgentsPage(this.paging)
      this.tableData = res.data
      this.total = page.data.length
      console.log(115, page.data)
    },
    uploadPage(page) {
      // 跳页
      this.paging.page = page
      this.getAgentsList(this.paging)
    },
    // 新增让弹框显示
    addAgents() {
      this.dialogVisible = true
    },
    // 删除功能
    delAgent(id) {
      this.$confirm('确定删除该经纪吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delAgent(id)
        // 发起删除请求后，判断当前页是否为第一页，并且是否只有一条数据
        if (this.tableData.length === 1 && this.paging.page !== 1) {
          // 如果不是当前页和只有一条数据，则删除后跳到前一页
          this.paging.page--
        }
        this.getAgentsList()
      }).catch(() => {

      })
    },
    // 点击编辑回填数据
    async uploadAgent(id) {
      // 获取数据
      const res = await getAgentById(id)
      //   给子组件的表单回填数据
      this.$refs.addAgents.ruleForm = res.data
      //   让弹框显示
      this.dialogVisible = true
      //   在全局的图片上传插件渲染出来后，把获取到的图片地址加到fileList数组里
      this.$nextTick(() => {
        this.$refs.addAgents.$refs.ImgUpload.fileList.push({ url: res.data.image })
        this.$refs.addAgents.$refs.ImgUpload.percentage = 100
      })
    }

  }
}
</script >

<style lang="scss">
    .top-box {
        margin-bottom: 20px;
    }
.top-right{

    width: 600px;
}

.cell{
    img{
        width: 150px;
    }
}

.el-pagination {
    margin-top: 20px;
}
</style>
